<template>
  <Disclosure  as="nav" class="bg-gray-800 z-10" v-slot="{ open }">
      <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div class="relative flex h-16 items-center justify-between">
          <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
            <!-- Mobile menu button-->
            <DisclosureButton class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
              <span class="sr-only">Open main menu</span>
            </DisclosureButton>
          </div>
          <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
            <div class="flex flex-shrink-0 items-center" >
              <img class="block h-8 w-auto lg:hidden" src="http://qingqaq.fun/kanaimg/test.png" />
              <img class="hidden h-8 w-auto lg:block" src="http://qingqaq.fun/kanaimg/test.png" />
            </div>
            <div class="hidden sm:ml-6 sm:block">
              <div class="flex space-x-4">
                <span v-for="item in navigation" :key="item.name" @click="toNav(item)" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 cursor-pointer hover:bg-gray-700 hover:text-white', 'px-3 py-2 rounded-md text-sm font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
            <div v-if="!loginState" class="flex space-x-4">
                <span class="text-gray-300 cursor-pointer hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" @click="toNav({'href': '/login'})" >登录</span>
                <span class="text-gray-300 cursor-pointer hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" @click="toNav({'href': '/register'})">注册</span>
              </div>
            <!-- Profile dropdown -->
            <Menu v-else as="div" class="relative ml-3">
              <div>
                <MenuButton class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                  <img class="h-8 w-8 rounded-full" :src="userInfo.user_img" alt="" />
                  <span class="text-gray-300  hover:text-white px-3 py-2 rounded-md text-sm font-medium">{{userInfo.nickname}}</span>
                </MenuButton>
              </div>
              <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
                <MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 ">
                  <MenuItem v-slot="{ active }" @click="toUserCenter">
                    <span class=" cursor-pointer" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']" >个人中心</span>
                  </MenuItem>
                  <MenuItem v-slot="{ active }">
                    <span class=" cursor-pointer" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">设置</span>
                  </MenuItem>
                  <MenuItem v-slot="{ active }">
                    <span class=" cursor-pointer" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']" @click="logout">退出登录</span>
                  </MenuItem>
                </MenuItems>
              </transition>
            </Menu>
          </div>
        </div>
      </div>
  
      <DisclosurePanel class="sm:hidden">
        <div class="space-y-1 px-2 pt-2 pb-3">
          <DisclosureButton  v-for="item in navigation" :key="item.name" as="span" @click="toNav(item)"  :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block px-3 py-2 rounded-md text-base font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton>
        </div>
      </DisclosurePanel>
  </Disclosure>
</template>

<script setup>
import {  inject, onMounted, ref, watch,  } from '@vue/runtime-core';
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import {  useRouter } from 'vue-router';
import {  useStore } from 'vuex';

const navigation = ref([
  { name: '首页', href: '/', current: true },
  { name: '博客', href: '/blogList', current: false },
  { name: '视频', href: '/videoList', current: false },
  { name: '论坛', href: '/', current: false },
  { name: '资源', href: '/resource', current: false },
  { name: '示例', href: '/exampledemo', current: false },
  { name: '关于', href: '/about', current: false },
])
const router = useRouter()
const loginState = ref(false)
const store = useStore()
const showTips = inject('$showTips')
const userInfo = ref({})


/**
 * @@@@@@@
 * functions
 * @@@@@@@
 */
const logout = function(){
  // 后续  可能调接口. 清token.. 不过现在可能暂无必要
  showTips({content: '退出登录陈宫'})
  store.commit('resetUserInfo')
  window.location.reload()
}

const toNav = function(item){
  router.push(item.href)
}

const toUserCenter = function(){
  router.push('/userCenter')
}


/**
 * @@@@@@@
 * watch
 * @@@@@@@
 */
 watch(() => router.currentRoute.value.name,(newRouterName) =>{
  console.log(router,newRouterName);
  navigation.value.forEach((item)=>{
    if(newRouterName == item.name){
      item.current = true
    } else {
      item.current = false
    }
  })
},{immediate: true})
watch(() => store.state.qingUserInfo,(currentUserInfo) =>{
  if(currentUserInfo.token != null){
    loginState.value = true
    userInfo.value = currentUserInfo
  }
},{immediate: true})
</script>

<style>

</style>